<!-- 右边模板-->
<template>
    <ul class="type-list">
        <draggable :animation="500"
            ghost-class="ghost"
            :list="rightList"
            :sort="false"
            @end="handleEnd"
            :clone="handleCloneDog"
            :group="{ name: 'template-info', pull: 'clone', put: false }">
            <li v-for="item in rightList" :key="item.modelKey" class="tool-type-item" @click="checkItem(item)">
                 <div class="type-item"><span>{{item.modelName}}</span></div>
            </li>
        </draggable>
    </ul>
</template>

<script setup>
import { ref, onMounted, defineEmits, defineProps, watch, computed} from 'vue';
import { VueDraggableNext as draggable } from 'vue-draggable-next';
import { deepCopy } from '@/lib/tools.js' 

/* 尽管是可选的，但是推荐定义所有要触发的事件类型 */
const emit = defineEmits(['move']);


const props = defineProps({
    data: {
        type: Array,
        default: () => {
            return [];
        }
    }
})

const typeList = ref([]);

// 监听模板是否变更
watch(() => props.data, (val) => {
    typeList.value = val;
}, {deep: true});


const rightList = computed(() => {
    return typeList.value.filter(item => !item.hidden);
})



const curItem = ref({});

// 拖拽复制
function handleCloneDog(item) {
    curItem.value = deepCopy(item);
}

// 拖拽结束
function handleEnd(e) {
    if(e.pullMode){
        let index = typeList.value.findIndex(item => item.modelKey === curItem.value.modelKey);
        typeList.value[index].hidden = true;
        emit('move', curItem.value, e.newIndex);
    }
}

// 选中
function checkItem (data) {
    let index = typeList.value.findIndex(item => item.modelKey === data.modelKey);
    typeList.value[index].hidden = true;
    emit('move', data, -1);
}


onMounted(() => {
    // 修复火狐拖拽搜索问题
    document.body.ondrop = function (event) {
        event.preventDefault();
        event.stopPropagation();
    }
})
       

</script>

<style lang="scss" scoped>
.type-list {
    width: 250px;
    margin: 20px 0px 0px 30px;
    border: 1px solid #999999;
    list-style: none;
    padding: 20px;
    position: relative;
    z-index: 2;
    background: #ffffff;
    height: 398px;
    box-sizing: border-box;
    overflow-y: auto;
    li {
        margin-bottom: 10px;
        &:last-child {
            margin-bottom: 0px;
        }
    }
    .type-item {
        padding: 11px 10px;
        font-size: 14px;
        cursor: pointer;
        display: flex;
        align-items: center;
        &:hover {
            border-radius: 4px;
            background: #f6f6f6;
            span,
            .icon {
                color: #0257ff;
            }
        }
        span {
            height: 14px;
            font-size: 14px;
            font-family: MicrosoftYaHei;
            color: #000000;
            line-height: 14px;
            margin-left: 10px;
            user-select: none;
        }
    }
    .icon {
        flex: none;
        color: #0257FF;
        font-size: 14px;
        font-style: normal;
        width: 14px;
        height: 14px;
        line-height: 14px;
        &.radio {
            &::before {
                font-family: 'iconfont';
                content: '\e662';
                display: inline-block;
            }
        }
        &.checkbox {
            &::before {
                font-family: 'iconfont';
                content: '\e661';
                display: inline-block;
            }
        }
        &.icon-black {
            &::before {
                font-family: 'iconfont';
                content: '\e65d';
                display: inline-block;
            }
        }
        &.si-black {
            &::before {
                font-family: 'iconfont';
                content: '\e67e';
                display: inline-block;
            }
        }
        &.file {
            &::before {
                font-family: 'iconfont';
                content: '\e660';
                display: inline-block;
            }
        }
        &.lb {
            &::before {
                font-family: 'iconfont';
                content: '\e65e';
                display: inline-block;
            }
        }
        &.bg {
            &::before {
                font-family: 'iconfont';
                content: '\e65f';
                display: inline-block;
            }
        }
        &.title {
            &::before {
                font-family: 'iconfont';
                content: '\e663';
                display: inline-block;
            }
        }
    }
}
</style>